<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>操作</th>
            </tr>

        </thead>
       
        <tbody>
            <tr>
                <td>张三</td>
                <td>19</td>
                <td>男</td>
                <td>删除</td>
            </tr>
        </tbody>
    </table>
    <script>
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            },
            {
                name: 'Top2',
                age: 30,
                gender: '男'
            }
        ]

        var tbodyEle = document.querySelector("tbody");
        tbodyEle.innerHTML = "";
        function createTable(arr){
            arr.forEach(function(item ,key){
                var trEle = document.createElement("tr");
                if(key%2==0){
                    trEle.style.background = "red";
                }
               
                // trEle.innerHTML = `<td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td><td>删除</td>`;
                for(var k in item){
                    var tdEle = document.createElement("td");
                    tdEle.innerHTML = item[k];
                    trEle.appendChild(tdEle);
                }
                // 手动创建一个td里面放删除文本；
                var tdEleDelete = document.createElement("td");
                tdEleDelete.onclick = function(){
                    // console.log(111);
                    // console.log(this);
                    this.parentNode.remove();
                }
                tdEleDelete.innerHTML = "删除";
                trEle.appendChild(tdEleDelete);
                
                // console.log(trEle);
                tbodyEle.appendChild(trEle);
            })
        }

        createTable(arr);





    </script>
</body>
</html>